<template>
    <div id="app">
      <slide-verify ref="slideBlock" @success="onSuccess" @again="onAgain" @fulfilled="onFulfilled" @fail="onFail"
                    @refresh="onRefresh" :slider-text="text" :imgs="imgs" :accuracy="accuracy"></slide-verify>
      <div>{{ msg }}</div>
      <button class="btn" @click="handleClick">在父组件点击刷新</button>
    </div>
  </template>
   
  <script setup>
  import img0 from '@/assets/base/logo.png';
  import img1 from '@/assets/base/beijing.png';
  import img2 from '@/assets/base/daybyday.png';
  import img3 from '@/assets/base/beijingtu1.png';
  import img4 from '@/assets/base/beijingtu2.png';
  import img5 from '@/assets/base/beijingtu3.png';
  import {ref} from "vue";
   
  const slideBlock = ref();
  const msg = ref('');
  const text = ref('向右滑动->');
  const imgs = ref([
    img0,
    img1,
    img2,
    img3,
    img4,
    img5,
  ]);
  const accuracy = ref(1); // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
   
   
  const onSuccess = (times) => {
    console.log('验证通过');
    msg.value = `login success, 耗时${(times / 1000).toFixed(1)}s`;
  };
  const onFail = () => {
    console.log('验证不通过');
    msg.value = ''
  };
  const onRefresh = () => {
    console.log('点击了刷新小图标');
    msg.value = ''
  };
  const onFulfilled = () => {
    console.log('刷新成功啦！');
  };
  const onAgain = () => {
    console.log('检测到非人为操作的哦！');
    msg.value = 'try again';
    // 刷新
    handleClick();
  };
  const handleClick = () => {
    slideBlock.value.reset();
    msg.value = ''
  }
   
  </script>
   
  <style scoped>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    margin-top: 60px;
  }
   
  .btn {
    margin-top: 20px;
    outline: 0;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    color: #fff;
    background-color: #1890ff;
    cursor: pointer;
  }
   
  .btn:active {
    box-shadow: 1px 5px 0 rgba(0, 0, 0, 0.1) inset;
  }
  </style>